<template>
    <article class="content">
      
      <div class="DataItems">
        <DataItem 
          v-for="feature in features"
          :key="feature.id"
          :title="feature.title"
          :abstract="feature.description"
          :id = "feature.id"
        />
      </div>
      <el-pagination style="margin: 20px;" background layout="prev, pager, next" :total="1000" />
    </article>
  </template>
  
  <script setup>
  import DataItem from '../components/DataItem.vue'
  
  const features = [
    { id: 1, title: '响应式设计', description: '自动适应手机、平板和桌面电脑' },
    { id: 2, title: 'Vue 3组件', description: '使用Composition API和<script setup>语法' },
    { id: 3, title: '性能优化', description: '快速加载，流畅体验' }
  ]
  </script>
  
  <style scoped>
  .content {
    margin-bottom: 2rem;
    background-color: #fff;
  }
  
  .DataItems {
    display: flex;
    flex-direction: column;
    margin: 2rem 0;
  }
  
  @media (max-width: 767px) {
    .DataItems {
      grid-template-columns: 1fr;
    }
  }
  </style>